<template>
  <div>
    <div id="calendar">
      <!-- 年份 月份 -->
      <div class="month">
          <ul>
              <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
              <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
              <li class="year-month">
                  <span class="choose-year">{{ currentYear }}</span>
                  <span class="choose-month">{{ currentMonth }}月</span>
              </li>
              <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
          </ul>
      </div>
      <!-- 星期 -->
      <div class="days__box">
        <ul class="weekdays">
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li style="color:red">六</li>
          <li style="color:red">日</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">
          <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
          <li  v-for="(dayobject, index) in days" :key="index">
              <!--本月-->
              <!--如果不是本月  改变类名加灰色-->

              <span v-if="dayobject.day.getMonth()+1 != currentMonth" 
                    class="other-month">
                {{ dayobject.day.getDate() }}
              </span>
              <!--如果是本月  还需要判断是不是这一天-->
              <span v-else>
            <!--今天  同年同月同日-->
                  <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" 
                        class="active"
                        :class="thisDay == index ? 'this-day' : ''"
                        @click="chooseToday(index)">
                    {{ dayobject.day.getDate() }}
                  </span>
                  <span v-else
                        :class="thisDay == index ? 'this-day' : ''"
                        @click="chooseToday(index)">
                      {{ dayobject.day.getDate() }}
                  </span>
              </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 0,
      days: [],
      dayLength: [],  
      thisDay: -1,
      beforeDays: 0,
    }
  },
  created () {
    this.initData(null)
    let day = new Date().getDate()
    this.$emit('getThisDya', day + this.beforeDays -1, this.beforeDays)
  },
  mounted () {
    
  },
  methods: {
    /**
     * 选择今天
     */
    chooseToday(val) {
      this.thisDay = val
      this.$emit('getThisDya', val, this.beforeDays)
    },
    /**
     * 日历
     */
    initData(cur) {
      let leftcount=0, //存放剩余数量
          date,
          now=new Date();
      if (cur) {
          date = new Date(cur)
      } else {
        let d = new Date(this.formatDate(now.getFullYear() , now.getMonth() + 1 , 1))
        d.setDate(35)
        date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
      }
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1
      this.$emit('getThisMonth', this.currentYear, this.currentMonth)
      this.currentWeek = date.getDay() // 1...6,0
      if (this.currentWeek == 0) {
        this.currentWeek = 7
      }
      var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay)
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (let i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str)
          d.setDate(d.getDate() - i)
          let dayobject={} //用一个对象包装Date对象  以便为以后预定功能添加属性
          dayobject.day=d
          this.days.push(dayobject)//将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      let daysNumber = 0
      this.days.forEach((item) => {
        if(item.day.getMonth()+1 != this.currentMonth) {
          daysNumber += 1
        }
      })
      this.beforeDays = daysNumber
      let x = new Date()
      var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();
      let daysLength = 0
      if(daysNumber + curMonthDays <= 35) {
        daysLength = 35
      } else {
        daysLength = 42
      }
      for (let i = 1; i <= daysLength - this.currentWeek; i++) {
          let d = new Date(str)
          d.setDate(d.getDate() + i)
          var dayobject={}
          dayobject.day=d
          this.days.push(dayobject)
      }
      // console.log(this.days[0].day.toLocaleString())
    },
    pickPre(year, month) {
      this.thisDay = -1
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year , month , 1))
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
    },
    pickNext(year, month) {
      this.thisDay = -1
      var d = new Date(this.formatDate(year , month , 1))
      d.setDate(35)
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
    },
    pickYear(year, month) {
      alert(year + "," + month)
    },

    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year,month,day){
      var y = year
      var m = month
      if(m<10) m = "0" + m
      var d = day
      if(d<10) d = "0" + d
      return y+"/"+m+"/"+d
    },
  },
}
</script>

<style lang="stylus" scoped>

#calendar{
  .this-day{
    color: yellow !important;
  }
  .days__box{
    width: 6rem;
  }
  li {
    display: inline-block;
    margin: 0 .1rem;
  }
  a {
    color: #42b983;
  }
  .month{
    display: flex;
    .arrow{
      cursor:pointer;
    }
  }
    
  .weekdays{
    display: flex;
    margin-bottom: 10px;
    >li{
      width: .6rem;
      height: .6rem;
      border: 1px solid blue;
      text-align: center;
      line-height: .6rem;
    }
  }  

  .days{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li{
      width: .6rem;
      height: .6rem;
      border: 1px solid #000;
      text-align: center;
      line-height: .6rem;
    }
 
  }
 
  .other-month{
    color: #eee; 
  }
    
  .active{
    color: red;
  }
    
}

</style>